<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>自由编导 | 基于剪映 API 的自动化视频生成平台：模板驱动，连接 make.com 批量生成</title>
  <meta name="description" content="在自由编导可视化搭建视频模板，连接 make.com 的 3000+ 应用自动替换素材，批量生成视频。支持剪映工程导入或在线渲染，新用户赠送 120 积分。" />
  <meta name="keywords" content="自动化视频生成,剪映API,视频模板,make.com,批量视频,在线渲染,剪映视频,AI视频" />
  <link rel="icon" href="https://ainews.ricoxueai.cn/news/0.png" sizes="any">
  <link rel="stylesheet" href="styles.css?v=6" />
  <style>
    .dynamic-brand {
      animation: colorAnimation 2s infinite !important;
      font-weight: 900 !important;
      display: inline-block !important;
    }
    
    @keyframes colorAnimation {
      0% { color: #7400e9 !important; }
      12.5% { color: #ff8c00 !important; }
      25% { color: #40e0d0 !important; }
      37.5% { color: #ee82ee !important; }
      50% { color: #32cd32 !important; }
      62.5% { color: #ff69b4 !important; }
      75% { color: #00bfff !important; }
      87.5% { color: #ff1493 !important; }
      100% { color: #0400ff !important; }
    }
    
    /* 强制覆盖任何父元素样式 */
    .gradient-text .dynamic-brand {
      background: none !important;
      -webkit-background-clip: initial !important;
      -webkit-text-fill-color: initial !important;
      background-clip: initial !important;
      color: #ff0080 !important;
    }
  </style>
</head>
<body>
  <header class="site-header">
    <div class="container nav-wrap">
      <a href="#hero" class="logo">
        <img src="src/icon/logo.png" alt="超级制作·自由编导" class="logo-img">
      </a>
      <nav class="nav">
        <div class="nav-dropdown">
          <a href="#" class="nav-dropdown-toggle" data-lang-key="nav-product">产品</a>
          <div class="nav-dropdown-menu">
            <a href="#editor" data-lang-key="nav-editor">模板编辑器</a>
            <a href="#workflow" data-lang-key="nav-workflow">Make自动化</a>
            <a href="#render" data-lang-key="nav-render">导出与渲染</a>
          </div>
        </div>
        <a href="#pricing" data-lang-key="nav-pricing">价格</a>
        <a href="https://t19ru4uh42v.feishu.cn/docx/X4Z3ds89moAWQlxDphBcm6uOnWZ" target="_blank" rel="noopener" data-lang-key="nav-docs">文档</a>
        <a href="https://t19ru4uh42v.feishu.cn/docx/Gv1NdSzvwoCtraxNCY8cNlJYnGg" target="_blank" rel="noopener" data-lang-key="nav-examples">示例</a>
      </nav>
      <div class="nav-cta">
        <button class="lang-switch" id="langSwitch">
          <span class="lang-flag">🇬🇧</span>
          <span class="lang-text">EN</span>
        </button>
        <a class="btn btn-outline" href="https://jianying.superslash.cn" target="_blank" rel="noopener" data-lang-key="nav-login">登录</a>
        <a class="btn btn-with-badge" href="https://jianying.superslash.cn" target="_blank" rel="noopener">
          <span data-lang-key="nav-register">注册</span>
          <span class="btn-badge" data-lang-key="badge-points">送积分</span>
        </a>
      </div>
    </div>
  </header>

  <main>
    <!-- Hero -->
    <section id="hero" class="section hero">
      <div class="hero-background">
        <div class="particles-container"></div>

        <div class="floating-elements">
          <!-- 原有图标 -->
          <div class="floating-icon floating-icon-1">🎬</div>
          <div class="floating-icon floating-icon-2">✨</div>
          <div class="floating-icon floating-icon-3">🎨</div>
          <div class="floating-icon floating-icon-4">🚀</div>
          
          <!-- 新增动态图标 -->
          <div class="floating-icon floating-icon-5">🎵</div>
          <div class="floating-icon floating-icon-7">⚡</div>
          <div class="floating-icon floating-icon-8">🎯</div>
          <div class="floating-icon floating-icon-9">💫</div>
          <div class="floating-icon floating-icon-10">🔥</div>
          
          <!-- 动态几何形状 -->
          <div class="floating-shape shape-circle"></div>
          <div class="floating-shape shape-triangle"></div>
          <div class="floating-shape shape-square"></div>
          <div class="floating-shape shape-diamond"></div>
          
          <!-- 动态线条 -->
          <div class="floating-line line-1"></div>
          <div class="floating-line line-2"></div>
          <div class="floating-line line-3"></div>
          
          <!-- 脉冲点 -->
          <div class="pulse-dot dot-1"></div>
          <div class="pulse-dot dot-2"></div>
          <div class="pulse-dot dot-3"></div>
          <div class="pulse-dot dot-4"></div>
        </div>
      </div>
      <div class="container hero-content">
        <div class="hero-text reveal">
          <h1 class="gradient-text hero-title" data-lang-key="hero-title">
            用"<span class="dynamic-brand" id="brand-text">Make+剪映</span>"，批量生成高质量视频
          </h1>
          <p class="subtitle" data-lang-key="hero-subtitle">基于剪映 API 的自动化视频合成平台。可视化搭建模板，连接 make.com 的 3000+ 应用，自动替换文字/图片/音频/视频等素材，支持剪映工程导入与在线渲染。</p>
          <ul class="bullets">
            <li data-lang-key="hero-bullet-1"><strong>可视化编辑：</strong>结构、背景、视频、音频、图片、文字、样式、特效、转场一站式编排。</li>
            <li data-lang-key="hero-bullet-2"><strong>AI自动化：</strong>连接 3000+ 应用与 AI 能力，批量替换素材，自动出片。</li>
            <li data-lang-key="hero-bullet-3"><strong>剪映生态：</strong>生成可导入本地剪映的工程文件，或直接在线渲染。</li>
            <li data-lang-key="hero-bullet-4"><strong>清晰计费：</strong>按模板与时长计费，成本清晰可预测，新用户赠送 120 积分。</li>
          </ul>
          <div class="cta">
            <a class="btn btn-lg" href="https://jianying.superslash.cn" target="_blank" rel="noopener" data-lang-key="hero-cta-start">立即开始</a>
            <a class="btn btn-outline btn-lg" href="https://t19ru4uh42v.feishu.cn/docx/Gv1NdSzvwoCtraxNCY8cNlJYnGg" target="_blank" rel="noopener" data-lang-key="hero-cta-examples">查看示例模板</a>
            <a class="link" href="https://t19ru4uh42v.feishu.cn/docx/X4Z3ds89moAWQlxDphBcm6uOnWZ" target="_blank" rel="noopener" data-lang-key="hero-cta-docs">文档与指南</a>
          </div>
        </div>
        <div class="hero-visual reveal">
          <img class="accent" src="src/pic/step.png" alt="流程示意图占位：模板 → 自动化 → 输出" />
        </div>
      </div>
    </section>

    <!-- 工作原理 -->
    <section id="how-it-works" class="section workflow-section">
      <div class="container">
        <h2 class="reveal" data-lang-key="workflow-title">3 步实现自动化视频生产</h2>
        <div class="video-glow-wrapper reveal">
          <div class="video-container">
            <iframe 
              src="https://player.bilibili.com/player.html?isOutside=true&aid=93717810&bvid=BV13E411x7YH&cid=160008981&p=1&autoplay=0&muted=0" 
              scrolling="no" 
              border="0" 
              frameborder="no" 
              framespacing="0" 
              allowfullscreen="true"
              width="100%" 
              height="100%"
              sandbox="allow-scripts allow-same-origin allow-presentation">
            </iframe>
          </div>
          <div class="glow-border"></div>
        </div>
        <div class="workflow-steps">
          <div class="step-glow-wrapper step-1-glow">
            <article class="step-card reveal">
              <div class="step-number">1</div>
              <img class="accent" src="src/pic/step1.png" alt="step1" />
              <h3 data-lang-key="workflow-step1-title">可视化搭建模板</h3>
              <p data-lang-key="workflow-step1-desc">在自由编导的可视化编辑器中，搭建视频模板：结构、背景、视频、音频、图片、文字，以及相应样式、特效、转场。</p>
              <a class="link" href="#editor">了解模板编辑器</a>
            </article>
            <div class="step-glow-border"></div>
          </div>
          
          <div class="step-arrow step-arrow-1">
            <svg width="60" height="24" viewBox="0 0 60 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2 12H58M58 12L48 2M58 12L48 22" stroke="#6366f1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
          
          <div class="step-glow-wrapper step-2-glow">
            <article class="step-card reveal">
              <div class="step-number">2</div>
              <img class="accent" src="src/pic/step2.png" alt="step2" />
              <h3 data-lang-key="workflow-step2-title">运行Make工作流</h3>
              <p data-lang-key="workflow-step2-desc">在 make.com 搜索「自由编导」应用，创建工作流，替换模板中的文字/音频/视频/图片素材，实现批量生成。</p>
              <a class="link" href="https://www.make.com" target="_blank" rel="noopener">在 make.com 打开</a>
            </article>
            <div class="step-glow-border"></div>
          </div>
          
          <div class="step-arrow step-arrow-2">
            <svg width="60" height="24" viewBox="0 0 60 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M2 12H58M58 12L48 2M58 12L48 22" stroke="#6366f1" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
          </div>
          
          <div class="step-glow-wrapper step-3-glow">
            <article class="step-card reveal">
              <div class="step-number">3</div>
              <img class="accent" src="src/pic/step3.png" alt="step3" />
              <h3 data-lang-key="workflow-step3-title">视频导出/渲染</h3>
              <p data-lang-key="workflow-step3-desc">生成可直接导入剪映的工程文件进行本地渲染，或选择在线渲染直接导出视频。</p>
              <a class="link" href="#render">输出与渲染说明</a>
            </article>
            <div class="step-glow-border"></div>
          </div>
        </div>
      </div>
    </section>

    <!-- 可视化模板编辑器 -->
    <section id="editor" class="section editor-section">
      <!-- 浮动图标 -->
      <div class="floating-icons">
        <div class="floating-icon icon-1">
          <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect x="5" y="5" width="30" height="30" rx="8" fill="rgba(255,255,255,0.8)" stroke="rgba(99,102,241,0.6)" stroke-width="2"/>
            <rect x="10" y="12" width="20" height="3" rx="1.5" fill="rgba(99,102,241,0.7)"/>
            <rect x="10" y="18" width="15" height="3" rx="1.5" fill="rgba(99,102,241,0.5)"/>
            <rect x="10" y="24" width="18" height="3" rx="1.5" fill="rgba(99,102,241,0.6)"/>
          </svg>
        </div>
        
        <div class="floating-icon icon-2">
          <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="16" cy="16" r="14" fill="rgba(255,255,255,0.9)" stroke="rgba(139,92,246,0.6)" stroke-width="2"/>
            <polygon points="12,10 12,22 22,16" fill="rgba(139,92,246,0.7)"/>
          </svg>
        </div>
        
        <div class="floating-icon icon-3">
          <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect x="4" y="4" width="40" height="40" rx="12" fill="rgba(255,255,255,0.7)" stroke="rgba(16,185,129,0.6)" stroke-width="2"/>
            <rect x="12" y="12" width="24" height="4" rx="2" fill="rgba(16,185,129,0.8)"/>
            <circle cx="16" cy="22" r="2" fill="rgba(16,185,129,0.6)"/>
            <circle cx="24" cy="22" r="2" fill="rgba(16,185,129,0.6)"/>
            <circle cx="32" cy="22" r="2" fill="rgba(16,185,129,0.6)"/>
            <rect x="12" y="28" width="24" height="8" rx="4" fill="rgba(16,185,129,0.3)"/>
          </svg>
        </div>
        
        <div class="floating-icon icon-4">
          <svg width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
            <polygon points="18,2 22,14 34,14 25,22 29,34 18,26 7,34 11,22 2,14 14,14" fill="rgba(255,255,255,0.8)" stroke="rgba(245,158,11,0.6)" stroke-width="2"/>
          </svg>
        </div>
        
        <div class="floating-icon icon-5">
          <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect x="2" y="2" width="24" height="24" rx="6" fill="rgba(255,255,255,0.9)" stroke="rgba(239,68,68,0.6)" stroke-width="2"/>
            <path d="M8 14 L12 18 L20 10" stroke="rgba(239,68,68,0.7)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
          </svg>
        </div>
        
        <div class="floating-icon icon-6">
          <svg width="44" height="44" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="22" cy="22" r="20" fill="rgba(255,255,255,0.6)" stroke="rgba(168,85,247,0.6)" stroke-width="2"/>
            <rect x="18" y="10" width="8" height="24" rx="4" fill="rgba(168,85,247,0.7)"/>
            <rect x="10" y="18" width="24" height="8" rx="4" fill="rgba(168,85,247,0.7)"/>
          </svg>
        </div>
        
        <div class="floating-icon icon-7">
          <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
            <polygon points="15,3 18,12 27,12 20,17 23,26 15,21 7,26 10,17 3,12 12,12" fill="rgba(255,255,255,0.8)" stroke="rgba(59,130,246,0.6)" stroke-width="2"/>
            <circle cx="15" cy="15" r="4" fill="rgba(59,130,246,0.5)"/>
          </svg>
        </div>
        
        <div class="floating-icon icon-8">
          <svg width="38" height="38" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
            <rect x="3" y="3" width="32" height="32" rx="10" fill="rgba(255,255,255,0.7)" stroke="rgba(34,197,94,0.6)" stroke-width="2"/>
            <circle cx="12" cy="12" r="3" fill="rgba(34,197,94,0.8)"/>
            <circle cx="26" cy="12" r="3" fill="rgba(34,197,94,0.8)"/>
            <circle cx="19" cy="26" r="3" fill="rgba(34,197,94,0.8)"/>
            <path d="M12 12 L26 12 L19 26 Z" fill="rgba(34,197,94,0.3)"/>
          </svg>
        </div>
      </div>
      
      <div class="container">
        <h2 class="reveal white-title" data-lang-key="editor-title">可视化模板编辑器，为规模化而生</h2>
        <div class="feature-scroll-container">
          <div class="feature-cards-track">
            <article class="feature-card reveal">
              <img class="feature-icon" src="src/pic/2.png" alt="多轨结构编排" />
              <h3 data-lang-key="editor-feature1-title">多轨结构编排</h3>
              <p data-lang-key="editor-feature1-desc">时间线与片段结构管理，支持片段复用与占位符定义</p>
            </article>
            <article class="feature-card reveal">
              <img class="feature-icon" src="src/pic/3.png" alt="丰富媒体类型" />
              <h3 data-lang-key="editor-feature2-title">丰富媒体类型</h3>
              <p data-lang-key="editor-feature2-desc">视频/音频/图片/文字/背景统一管理</p>
            </article>
            <article class="feature-card reveal">
              <img class="feature-icon" src="src/pic/4.png" alt="样式与特效" />
              <h3 data-lang-key="editor-feature3-title">样式与特效</h3>
              <p data-lang-key="editor-feature3-desc">字体、颜色、阴影、动效、滤镜、转场、关键帧</p>
            </article>
            <article class="feature-card reveal">
              <img class="feature-icon" src="src/pic/5.png" alt="参数化占位" />
              <h3 data-lang-key="editor-feature4-title">参数化占位</h3>
              <p data-lang-key="editor-feature4-desc">可在模板中声明变量，供工作流自动替换</p>
            </article>
            <article class="feature-card reveal">
              <img class="feature-icon" src="src/pic/6.png" alt="预览与版本" />
              <h3 data-lang-key="editor-feature5-title">预览与版本</h3>
              <p data-lang-key="editor-feature5-desc">所见即所得预览，版本保存与回滚</p>
            </article>
            <article class="feature-card reveal">
              <img class="feature-icon" src="src/pic/7.png" alt="工程一致性" />
              <h3 data-lang-key="editor-feature6-title">工程一致性</h3>
              <p data-lang-key="editor-feature6-desc">与剪映工程规范兼容，减少回导差异</p>
            </article>
            <!-- 重复卡片用于无缝循环 -->
            <article class="feature-card reveal">
              <img class="feature-icon" src="src/pic/2.png" alt="多轨结构编排" />
              <h3>多轨结构编排</h3>
              <p>时间线与片段结构管理，支持片段复用与占位符定义</p>
            </article>
            <article class="feature-card reveal">
              <img class="feature-icon" src="src/pic/3.png" alt="丰富媒体类型" />
              <h3>丰富媒体类型</h3>
              <p>视频/音频/图片/文字/背景统一管理</p>
            </article>
          </div>
        </div>
      </div>
    </section>

    <!-- 自动化工作流 -->
    <section id="workflow" class="section workflow-section">
      <div class="container">
        <h2 class="reveal" data-lang-key="automation-title">连接 make.com 的 3000+ 应用，释放自动化与 AI</h2>
        <p class="center" data-lang-key="automation-desc">在 make.com 中搜索并使用"自由编导"应用，组合数据源、AI 能力与素材库，实现从数据到成片的自动化生产。</p>
        
        <!-- 工作流示意图容器 -->
        <div class="workflow-diagram-container">
          <!-- 浮动logo图标 -->
          <div class="floating-logos">
            <div class="floating-logo logo-1">
              <img src="src/icon/1.png" alt="应用logo 1" />
            </div>
            
            <div class="floating-logo logo-2">
              <img src="src/icon/2.png" alt="应用logo 2" />
            </div>
            
            <div class="floating-logo logo-3">
              <img src="src/icon/3.png" alt="应用logo 3" />
            </div>
            
            <div class="floating-logo logo-4">
              <img src="src/icon/4.png" alt="应用logo 4" />
            </div>
            
            <div class="floating-logo logo-5">
              <img src="src/icon/5.png" alt="应用logo 5" />
            </div>
            
            <div class="floating-logo logo-6">
              <img src="src/icon/6.png" alt="应用logo 6" />
            </div>
            
            <div class="floating-logo logo-7">
              <img src="src/icon/7.png" alt="应用logo 7" />
            </div>
            
            <div class="floating-logo logo-8">
              <img src="src/icon/8.png" alt="应用logo 8" />
            </div>
          </div>
          
          <!-- 中心工作流示意图 -->
          <div class="workflow-diagram">
            <img class="workflow-image" src="src/pic/make.png" alt="make.com 工作流示意图" />
          </div>
        </div>
      </div>
    </section>

    <!-- 渲染与输出 -->
    <section id="render" class="section render-output-section">
      <div class="container">
        <h2 class="reveal" data-lang-key="render-title">剪映工程导入与在线渲染，双路径出片</h2>
        <p class="center" data-lang-key="render-desc">两种方式可自由选择，互不冲突。</p>
        <div class="render-comparison">
          <div class="render-option card trapezoid-top">
            <img class="accent" src="src/pic/video1.png" alt="剪映工程占位" />
            <h3 data-lang-key="render-local-title">本地流程（导出剪映工程）</h3>
            <p data-lang-key="render-local-desc">生成可导入剪映的软件草稿工程文件，本地渲染。</p>
            <div class="tags">
              <span class="tag" data-lang-key="render-local-tag1">可校对</span>
              <span class="tag" data-lang-key="render-local-tag2">可二次微调</span>
              <span class="tag" data-lang-key="render-local-tag3">适合本地素材</span>
            </div>
          </div>
          
          <div class="or-divider">
            <div class="or-text" data-lang-key="render-or">OR</div>
          </div>
          
          <div class="render-option card trapezoid-bottom">
            <img class="accent" src="src/pic/background1.png" alt="在线渲染占位" />
            <h3 data-lang-key="render-online-title">在线渲染</h3>
            <p data-lang-key="render-online-desc">无需本地环境，云端完成渲染，直接获得成品视频。</p>
            <div class="tags">
              <span class="tag" data-lang-key="render-online-tag1">免环境</span>
              <span class="tag" data-lang-key="render-online-tag2">快交付</span>
              <span class="tag" data-lang-key="render-online-tag3">适合批量任务</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 计费与价格 -->
    <section id="pricing" class="section pricing-section">
      <div class="container">
        <h2 class="reveal" data-lang-key="pricing-title">清晰透明的积分计费</h2>
        <p data-lang-key="pricing-desc">透明清晰的计费标准，让您的成本可预测</p>
        
        <!-- 积分规则区域 -->
        <div class="pricing-rules">
          <div class="rules-header">
            <h3 data-lang-key="pricing-rules-title">📋 积分规则说明</h3>
          </div>
          <div class="rules-grid">
            <div class="rule-item">
              <div class="rule-icon">💰</div>
              <div class="rule-content">
                <strong data-lang-key="pricing-rule-recharge-title">充值比例</strong>
                <span data-lang-key="pricing-rule-recharge-desc">1 元人民币 = 10 积分</span>
              </div>
            </div>
            <div class="rule-item">
              <div class="rule-icon">🎨</div>
              <div class="rule-content">
                <strong data-lang-key="pricing-rule-template-title">创建模板</strong>
                <span data-lang-key="pricing-rule-template-desc">每创建 1 个模板消耗 50 积分</span>
              </div>
            </div>
            <div class="rule-item">
              <div class="rule-icon">⚡</div>
              <div class="rule-content">
                <strong data-lang-key="pricing-rule-generate-title">通过 make 生成视频</strong>
                <span data-lang-key="pricing-rule-generate-desc">每 10 秒视频消耗 1 积分（不足 10 秒不消耗）</span>
              </div>
            </div>
            <div class="rule-item">
              <div class="rule-icon">☁️</div>
              <div class="rule-content">
                <strong data-lang-key="pricing-rule-render-title">在线渲染</strong>
                <span data-lang-key="pricing-rule-render-desc">每 10 秒视频消耗 1 积分（不足 10 秒不消耗）</span>
              </div>
            </div>
            <div class="rule-item">
              <div class="rule-icon">🎁</div>
              <div class="rule-content">
                <strong data-lang-key="pricing-rule-gift-title">新用户赠送</strong>
                <span data-lang-key="pricing-rule-gift-desc">注册即送 120 积分</span>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 主要内容区域：示例和试算器 -->
        <div class="pricing-main">
          <!-- 示例区域 -->
          <div class="pricing-examples">
            <div class="examples-header">
              <h3 data-lang-key="pricing-examples-title">💡 计费示例</h3>
              <p data-lang-key="pricing-examples-desc">看看实际使用场景的积分消耗</p>
            </div>
            <div class="examples-grid">
              <div class="example-card card reveal">
                <h4 data-lang-key="pricing-example-a-title">示例 A：30 秒视频</h4>
                <div class="example-breakdown">
                  <div class="breakdown-item">
                    <span class="item-label" data-lang-key="pricing-example-generate">生成视频</span>
                    <span class="item-value" data-lang-key="pricing-example-a-generate-points">3 积分</span>
                  </div>
                  <div class="breakdown-item">
                    <span class="item-label" data-lang-key="pricing-example-render">在线渲染（可选）</span>
                    <span class="item-value" data-lang-key="pricing-example-a-render-points">3 积分</span>
                  </div>
                  <div class="breakdown-total">
                    <span class="total-label" data-lang-key="pricing-example-total">合计</span>
                    <span class="total-value" data-lang-key="pricing-example-a-total-points">6 积分</span>
                  </div>
                </div>
                <div class="example-note" data-lang-key="pricing-example-note">不含模板创建</div>
              </div>
              
              <div class="example-card card reveal">
                <h4 data-lang-key="pricing-example-b-title">示例 B：10 个 45 秒视频</h4>
                <div class="example-breakdown">
                  <div class="breakdown-item">
                    <span class="item-label" data-lang-key="pricing-example-generate">生成视频</span>
                    <span class="item-value" data-lang-key="pricing-example-b-generate-points">40 积分</span>
                  </div>
                  <div class="breakdown-item">
                    <span class="item-label" data-lang-key="pricing-example-render">在线渲染（可选）</span>
                    <span class="item-value" data-lang-key="pricing-example-b-render-points">40 积分</span>
                  </div>
                  <div class="breakdown-total">
                    <span class="total-label" data-lang-key="pricing-example-total">合计</span>
                    <span class="total-value" data-lang-key="pricing-example-b-total-points">80 积分</span>
                  </div>
                </div>
                <div class="example-note" data-lang-key="pricing-example-note">不含模板创建</div>
              </div>
            </div>
          </div>
          
          <!-- 试算器区域 -->
          <div class="pricing-calculator">
            <div class="calculator card reveal">
              <div class="calculator-header">
                <h3 data-lang-key="pricing-calculator-title">🧮 积分试算器</h3>
                <p data-lang-key="pricing-calculator-desc">快速计算您的项目成本</p>
              </div>
              <div class="calculator-form">
                <label><span data-lang-key="calculator-duration-label">视频时长（秒）</span><input id="duration" type="number" min="0" value="30" /></label>
                <label><span data-lang-key="calculator-count-label">数量（条）</span><input id="count" type="number" min="1" value="10" /></label>
                <label class="checkbox"><input id="renderOnline" type="checkbox" /> <span data-lang-key="calculator-render-label">是否在线渲染（可选）</span></label>
              </div>
              <div class="calc-result">
                <div class="result-item">
                  <span class="result-label" data-lang-key="calculator-points-label">预计消耗积分</span>
                  <span class="result-value" id="points">—</span>
                </div>
                <div class="result-item">
                  <span class="result-label" data-lang-key="calculator-rmb-label">人民币参考</span>
                  <span class="result-value" id="rmb"><span data-lang-key="calculator-rmb-placeholder">— 元</span></span>
                </div>
              </div>
              <a class="btn btn-success" href="https://jianying.superslash.cn" target="_blank" rel="noopener" data-lang-key="calculator-pay-button">立即支付</a>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 典型场景 -->
    <section id="scenarios" class="section alt scenarios-section">
      <div class="container">
        <h2 class="reveal" data-lang-key="scenarios-title">把重复的视频生产，交给自动化</h2>
        <div class="carousel-gallery">
          <div class="carousel-container">
            <div class="carousel-track" id="scenariosCarousel">
              <article class="carousel-card" data-index="0">
                <div class="card-content">
                  <img class="accent" src="src/pic/shopping.png" alt="电商与品牌占位" />
                  <h3 data-lang-key="scenario1-title">电商与品牌</h3>
                  <p data-lang-key="scenario1-desc">批量商品卡片视频、促销/节日素材、达口播模板化。</p>
                  <div class="card-tags">
                    <span class="tag" data-lang-key="scenario1-tag1">商品展示</span>
                    <span class="tag" data-lang-key="scenario1-tag2">促销活动</span>
                  </div>
                </div>
              </article>
              <article class="carousel-card active" data-index="1">
                <div class="card-content">
                  <img class="accent" src="src/pic/edu.png" alt="教育与培训占位" />
                  <h3 data-lang-key="scenario2-title">教育与培训</h3>
                  <p data-lang-key="scenario2-desc">大纲驱动的知识点视频、题目讲解、术语卡片。</p>
                  <div class="card-tags">
                    <span class="tag" data-lang-key="scenario2-tag1">知识点</span>
                    <span class="tag" data-lang-key="scenario2-tag2">题目讲解</span>
                  </div>
                </div>
              </article>
              <article class="carousel-card" data-index="2">
                <div class="card-content">
                  <img class="accent" src="src/pic/media.png" alt="媒体与资讯占位" />
                  <h3 data-lang-key="scenario3-title">媒体与资讯</h3>
                  <p data-lang-key="scenario3-desc">热点快报、数据榜单、城市/行业周报。</p>
                  <div class="card-tags">
                    <span class="tag" data-lang-key="scenario3-tag1">热点快报</span>
                    <span class="tag" data-lang-key="scenario3-tag2">数据榜单</span>
                  </div>
                </div>
              </article>
              <article class="carousel-card" data-index="3">
                <div class="card-content">
                  <img class="accent" src="src/pic/qiye.png" alt="企业内训公关占位" />
                  <h3 data-lang-key="scenario4-title">企业内训/公关</h3>
                  <p data-lang-key="scenario4-desc">SOP 演示、季度报告、活动回顾。</p>
                  <div class="card-tags">
                    <span class="tag" data-lang-key="scenario4-tag1">SOP演示</span>
                    <span class="tag" data-lang-key="scenario4-tag2">季度报告</span>
                  </div>
                </div>
              </article>
            </div>
          </div>
          <div class="carousel-indicators">
            <button class="indicator active" data-slide="0"></button>
            <button class="indicator" data-slide="1"></button>
            <button class="indicator" data-slide="2"></button>
            <button class="indicator" data-slide="3"></button>
          </div>
        </div>
      </div>
    </section>

    <!-- 用户背书 -->
    <section id="testimonials" class="section testimonials-section">
      <div class="container">
        <h2 class="reveal" data-lang-key="testimonials-title">他们正在用自由编导提升视频生产效率</h2>
        <div class="testimonials-container reveal">
          <div class="testimonial-item">
            <div class="testimonial-header">
              <div class="testimonial-avatar">
                <img src="src/avatar/avatar-zhang.svg" alt="张总监" />
              </div>
              <div class="testimonial-author">
                <span class="author-name" data-lang-key="testimonial1-name">张总监</span>
                <span class="author-company" data-lang-key="testimonial1-company">某电商品牌</span>
              </div>
            </div>
            <div class="testimonial-content">
              <p class="testimonial-quote" data-lang-key="testimonial1-quote">批量视频生产从天到小时，效率提升显著。</p>
            </div>
          </div>
          
          <div class="testimonial-item">
            <div class="testimonial-header">
              <div class="testimonial-avatar">
                <img src="src/avatar/avatar-li.svg" alt="李经理" />
              </div>
              <div class="testimonial-author">
                <span class="author-name" data-lang-key="testimonial2-name">李经理</span>
                <span class="author-company" data-lang-key="testimonial2-company">教育科技公司</span>
              </div>
            </div>
            <div class="testimonial-content">
              <p class="testimonial-quote" data-lang-key="testimonial2-quote">模板 + 自动化，让我们的视频风格保持一致。</p>
            </div>
          </div>
          
          <div class="testimonial-item">
            <div class="testimonial-header">
              <div class="testimonial-avatar">
                <img src="src/avatar/avatar-wang.svg" alt="王运营" />
              </div>
              <div class="testimonial-author">
                <span class="author-name" data-lang-key="testimonial3-name">王运营</span>
                <span class="author-company" data-lang-key="testimonial3-company">媒体工作室</span>
              </div>
            </div>
            <div class="testimonial-content">
              <p class="testimonial-quote" data-lang-key="testimonial3-quote">接入剪映工程后，校对与二次编辑非常顺滑。</p>
            </div>
          </div>
          
          <div class="testimonial-item">
            <div class="testimonial-header">
              <div class="testimonial-avatar">
                <img src="src/avatar/avatar-chen.svg" alt="陈主管" />
              </div>
              <div class="testimonial-author">
                <span class="author-name" data-lang-key="testimonial4-name">陈主管</span>
                <span class="author-company" data-lang-key="testimonial4-company">企业培训部</span>
              </div>
            </div>
            <div class="testimonial-content">
              <p class="testimonial-quote" data-lang-key="testimonial4-quote">在线渲染适合批量任务，交付更快。</p>
            </div>
          </div>
          
          <div class="testimonial-item">
            <div class="testimonial-header">
              <div class="testimonial-avatar">
                <img src="src/avatar/avatar-liu.svg" alt="刘创始人" />
              </div>
              <div class="testimonial-author">
                <span class="author-name" data-lang-key="testimonial5-name">刘创始人</span>
                <span class="author-company" data-lang-key="testimonial5-company">内容创业团队</span>
              </div>
            </div>
            <div class="testimonial-content">
              <p class="testimonial-quote" data-lang-key="testimonial5-quote">按时长计费，成本清晰可控。</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 最终 CTA -->
    <section id="final-cta" class="section final">
      <div class="container center">
        <h2 class="reveal" data-lang-key="final-cta-title">现在开始，打造你的自动化视频生产线</h2>
        <div class="cta">
          <a class="btn btn-lg" href="https://jianying.superslash.cn" target="_blank" rel="noopener" data-lang-key="final-cta-start">立即开始</a>
          <a class="btn btn-outline btn-lg" href="https://t19ru4uh42v.feishu.cn/docx/Gv1NdSzvwoCtraxNCY8cNlJYnGg" target="_blank" rel="noopener" data-lang-key="final-cta-examples">查看示例模板</a>
          <a class="btn btn-outline btn-lg" href="https://t19ru4uh42v.feishu.cn/docx/X4Z3ds89moAWQlxDphBcm6uOnWZ" target="_blank" rel="noopener" data-lang-key="final-cta-guide">查看接入指南</a>
        </div>
      </div>
    </section>
  </main>

  <footer class="site-footer">
    <div class="container footer-grid">
      <div>
        <h4 data-lang-key="footer-product">产品</h4>
        <ul>
          <li><a href="#editor" data-lang-key="footer-features">特性</a></li>
          <li><a href="#pricing" data-lang-key="footer-pricing">价格</a></li>
          <li><a href="#scenarios" data-lang-key="footer-examples">示例</a></li>
        </ul>
      </div>
      <div>
        <h4 data-lang-key="footer-resources">资源</h4>
        <ul>
          <li><a href="https://t19ru4uh42v.feishu.cn/docx/X4Z3ds89moAWQlxDphBcm6uOnWZ" target="_blank" rel="noopener" data-lang-key="footer-docs">文档</a></li>
          <li><a href="https://t19ru4uh42v.feishu.cn/docx/X4Z3ds89moAWQlxDphBcm6uOnWZ" target="_blank" rel="noopener" data-lang-key="footer-api">API</a></li>
          <li><a href="https://www.ricoxueai.cn" target="_blank" rel="noopener" data-lang-key="footer-tutorials">教程</a></li>
        </ul>
      </div>
      <div>
        <h4 data-lang-key="footer-support">支持</h4>
        <ul>
          <li><a href="#" class="modal-trigger" data-modal="terms-modal" data-lang-key="footer-terms">服务条款</a></li>
          <li><a href="#" class="modal-trigger" data-modal="privacy-modal" data-lang-key="footer-privacy">隐私政策</a></li>
        </ul>
      </div>
      <div class="footer-qr">
        <h4 data-lang-key="footer-customer-service">客服支持</h4>
        <div class="qr-code">
          <img src="src/pic/qr.png" alt="客服二维码" class="qr-image">
          <p data-lang-key="footer-qr-text">扫码联系客服</p>
        </div>
      </div>
    </div>
    <div class="container copyright" data-lang-key="footer-copyright">© 超级斜杠 / 自由编导</div>
    <div class="container record-section"><a href="https://beian.miit.gov.cn/" target="_blank" class="record-link" data-lang-key="footer-icp">皖ICP备2024068632号-6</a><span class="separator">|</span><a href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=34011102003738" target="_blank" class="record-link" rel="noopener" data-lang-key="footer-police"> 皖公网安备34011102003738号 </a></div>
  </footer>

  <script>
    // 流动渐变动画效果
    function startBrandAnimation() {
      const brandElement = document.getElementById('brand-text');
      if (!brandElement) {
        console.log('Brand element not found');
        return;
      }
      
      console.log('Starting flowing gradient animation...');
      
      // 强制设置样式，覆盖任何CSS
      brandElement.style.setProperty('font-weight', '900', 'important');
      brandElement.style.setProperty('display', 'inline-block', 'important');
      brandElement.style.setProperty('background', 'linear-gradient(45deg, #ff0080, #ff8000, #00ffff, #8000ff, #00ff80, #ff1493, #00bfff, #ff69b4, #ff0080)', 'important');
      brandElement.style.setProperty('background-size', '800% 100%', 'important');
      brandElement.style.setProperty('-webkit-background-clip', 'text', 'important');
      brandElement.style.setProperty('background-clip', 'text', 'important');
      brandElement.style.setProperty('-webkit-text-fill-color', 'transparent', 'important');
      brandElement.style.setProperty('color', 'transparent', 'important');
      
      // 创建流动动画 - 从左往右，慢速随机流动
        let position = 0;
        let speed = Math.random() * 0.3 + 0.1; // 更慢的随机速度：0.1-0.4
        let lastSpeedChange = Date.now();
        
        function animateGradient() {
          // 每3-8秒随机改变一次速度，变化更频繁
          const now = Date.now();
          if (now - lastSpeedChange > Math.random() * 5000 + 3000) {
            speed = Math.random() * 0.3 + 0.1; // 新的慢速随机速度
            lastSpeedChange = now;
            console.log('Speed changed to:', speed.toFixed(3));
          }
          
          position += speed;
          if (position > 800) position = 0;
          
          // 从左往右流动：使用负值让渐变从左边开始
          brandElement.style.setProperty('background-position', `${-position}% 0%`, 'important');
          requestAnimationFrame(animateGradient);
        }
       
       animateGradient();
    }
    
    // 多种方式确保代码执行
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', startBrandAnimation);
    } else {
      startBrandAnimation();
    }
    
    // 备用方案：延迟执行
    setTimeout(startBrandAnimation, 100);
    setTimeout(startBrandAnimation, 500);
    setTimeout(startBrandAnimation, 1000);
  </script>
  <script src="script.js"></script>

  <!-- 服务条款弹窗 -->
  <div id="terms-modal" class="modal">
    <div class="modal-content">
      <div class="modal-header">
        <h2>服务条款</h2>
        <span class="modal-close">&times;</span>
      </div>
      <div class="modal-body">
        <h3>1. 服务说明</h3>
        <p>自由编导是一个AI驱动的视频编辑平台，为用户提供智能化的视频制作工具和服务。</p>
        
        <h3>2. 用户责任</h3>
        <p>用户在使用本服务时，应遵守相关法律法规，不得上传违法、有害或侵犯他人权益的内容。</p>
        
        <h3>3. 知识产权</h3>
        <p>用户通过本平台创作的内容，其知识产权归用户所有。平台提供的模板、素材等资源的知识产权归平台所有。</p>
        
        <h3>4. 服务限制</h3>
        <p>平台有权根据用户套餐限制使用频次、存储空间等。用户超出限制时需要升级套餐或等待重置。</p>
        
        <h3>5. 免责声明</h3>
        <p>平台不对用户使用服务产生的任何直接或间接损失承担责任，包括但不限于数据丢失、业务中断等。</p>
        
        <h3>6. 服务变更</h3>
        <p>平台有权随时修改或终止服务，并会提前通知用户。重大变更会通过邮件或站内通知告知。</p>
      </div>
    </div>
  </div>

  <!-- 隐私政策弹窗 -->
  <div id="privacy-modal" class="modal">
    <div class="modal-content">
      <div class="modal-header">
        <h2>隐私政策</h2>
        <span class="modal-close">&times;</span>
      </div>
      <div class="modal-body">
        <h3>1. 信息收集</h3>
        <p>我们收集您主动提供的信息，包括注册信息、上传的视频内容、使用偏好等，以便为您提供更好的服务。</p>
        
        <h3>2. 信息使用</h3>
        <p>收集的信息仅用于提供服务、改进产品、发送重要通知等目的，不会用于其他商业用途。</p>
        
        <h3>3. 信息保护</h3>
        <p>我们采用行业标准的安全措施保护您的个人信息，包括数据加密、访问控制、安全审计等。</p>
        
        <h3>4. 信息共享</h3>
        <p>除法律要求外，我们不会与第三方共享您的个人信息。合作伙伴访问数据时会签署保密协议。</p>
        
        <h3>5. Cookie使用</h3>
        <p>我们使用Cookie来改善用户体验、分析使用情况。您可以通过浏览器设置管理Cookie偏好。</p>
        
        <h3>6. 权利保障</h3>
        <p>您有权查看、修改、删除个人信息，或要求停止处理。如有需要，请联系客服。</p>
      </div>
    </div>
  </div>

</body>
</html>